<template>
  <div class="box" id="boxHg">
    <yd-slider autoplay="3000">
      <yd-slider-item v-for="(item,index) in object" :key="index">
        <a :href="item.advUrl">
          <img :src="imgUrl+item.advContent">
        </a>
      </yd-slider-item>
    </yd-slider>
    <!--
        <div class="giftsList" @click="gifts">
            <img src="../assets/song.jpg">        
        </div>
     -->    
    <ul class="box_ul">
      <!-- <li @click="gifts" v-for="(item,index) in giftsList" :key="index" style="min-height:1rem">
        <img v-if="item.advContent" :src="imgUrl+item.advContent">
      </li> -->  
      <li class="giftBanner">
        <img src="../assets/gift.png" alt="" @click="slsqBtn(0)">
        <div class="gift_tleft" @click="slsqBtn(0)">按价格选</div>
        <div class="gift_tright" @click="slsqBtn(1)">按对象选</div>
      </li>
      <li @click="axzlBtn" v-for="(item,index) in axList" :key="index">
        <img v-if="item.advContent" :src="imgUrl+item.advContent">
      </li>
      <li @click="quality" v-for="(item,index) in pzList" :key="index">
        <img v-if="item.advContent" :src="imgUrl+item.advContent">
      </li>
      <!-- 
        <li v-show="memberDetail == 1" @click="wealth" v-for="(item,index) in bjList" :key="index">
            <img v-if="item.advContent" :src="imgUrl+item.advContent">
        </li> 
      -->
      <li @click="wealth" v-for="(item,index) in bjList" :key="index">
        <img v-if="item.advContent" :src="imgUrl+item.advContent" style="pointer-events:none;">
      </li>
    </ul>
  </div>
</template>

<script>
// import wx from 'weixin-js-sdk'

export default {
    name: 'box',
    data() {
        return {
            imgUrl: this.CONSTANT.imgBaseUrl,
            searchValue: '',
            memberDetail: 0,
            object: [],
            axList: [{ advContent: '' }],
            pzList: [{ advContent: '' }],
            bjList: [{ advContent: '' }],
            giftsList: [],
        }
    },
    created() {
        // 当前页面是从易连互动返回的场合
        // (砸蛋页面不是从该首页跳转的，因此不能返回到，wineggToLottery的判断处理也就不需要)
        if (this.$store.state.pageToPage == 'meToLottery') {   
            this.$store.commit('pageToPage', '');         
            this.$router.push('/me');
        }
        // 以上跳转以外的场合
        // 取得浏览器的信息
        let userAgent = navigator.userAgent.toLowerCase();
        // 企业微信浏览器多了wxwork
        if (userAgent.indexOf("wxwork") > -1) {
            this.$store.commit('inMode', 'qiye');
        } else {
            this.$store.commit('inMode', 'weixin');
        }

        // 清空已设定的值
        this.$store.commit('selectedTab', '');
        this.$store.commit('scan', '');
        this.$dialog.loading.open('请稍后');
        this.init(1);
        
        //  _trackPageview:用于发送某个URL的PV统计请求，适用于统计AJAX、异步加载页面，友情链接，下载链接的流量。
        //  _czc.push(["_trackPageview",content_url,referer_url]);
        //    content_url: (必填) 自定义虚拟PV页面的URL地址(填写以斜杠‘/’开头的相对路径，系统会自动补全域名)
        //    referer_url:(选填) 自定义该受访页面的来源页URL地址
        //                 (建议填写该异步加载页面的母页面。 不填，则来路按母页面的来路计算。
        //                     填为“空”，即""，则来路按“直接输入网址或书签”计算。)
        _czc.push(["_trackPageview", "/box", ""]); 
    },
    mounted: function() {
        this.$nextTick(() => {
            let scrollView = document.getElementById('scrollView');
            let boxHg = document.getElementById('boxHg');
            let h = scrollView.offsetHeight;
            boxHg.style.minHeight = (h - 35) + 'px';
        });

        // // 返回键按下后退出        
        // window.addEventListener("popstate",function(e) {
        //         // wx.closeWindow();
        //     },false)

    },
    methods: {
        memberDetails() {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'member/memberDetail')
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        let email = response.data.object.memberEmail;
                        if (email.indexOf('cofco.com') > 0) {
                            this.memberDetail = 1;
                            this.$store.commit('memberDetail', 1);
                        }
                    }
                })
                .catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        init(item) {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'adv/list?apId=' + item)
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        this.object = response.data.object;
                        this.inits(10);
                        this.inits(2);
                        this.inits(3);
                        this.inits(4);
                    }
                })
                .catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        inits(item) {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'adv/list?apId=' + item)
                .then((response) => {
                    if (response.status == 200) {
                        if (item == 2 && response.data.object.length > 0) {
                            this.axList = [];
                            this.axList.push(response.data.object[0]);
                        } else if (item == 3 && response.data.object.length > 0) {
                            this.pzList = [];
                            this.pzList.push(response.data.object[0]);
                        } else if (item == 4 && response.data.object.length > 0) {
                            this.bjList = [];
                            this.bjList.push(response.data.object[0]);
                        } else if (item == 10 && response.data.object.length > 0) {
                            this.giftsList = [];
                            this.giftsList.push(response.data.object[0]);
                        }
                    }
                }).catch((error) => {

                });
        },
        submitHandler() {
            this.$store.commit('searchValue', this.searchValue);
            this.$router.push('/qualitylist');
        },
        axzlBtn() {
            this.$router.push('/love');
        },
        quality() {
            // this.$router.push('/quality');
            this.$dialog.toast({mes: '改版中，敬请期待!', timeout: 1000});
        },
        wealth() {
            // this.$router.push('/wealth');
            this.$dialog.toast({mes: '开发中，敬请期待!', timeout: 1000});
            // this.$router.push('/signIn');
        },
        commodity() {
            this.$router.push('/commodity');
        },
        // gifts() {
        //     this.$router.push('/gifts');
        // }
        slsqBtn(item) {
            this.$router.push('/gifts?item=' + item);
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box {
    font-size: 14px;
}

/* .box .giftsList {
    width: 100%;
    height: auto;
    padding: .266667rem;
    padding-bottom: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.giftsList img {
    width: 100%;
    display: block;
} */

.box .box_ul {
    width: 100%;
    height: auto;
    padding: .266667rem;
    box-sizing: border-box;
    overflow: hidden;
}
.box .box_ul li {
    width: 7rem;
    height: auto;
    min-height: 2rem;
    margin: 0 auto;
    margin-bottom: .266667rem;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f5f5;
    position: relative;
}
.box .box_ul li img {
    display: block;
    width: 100%;
    height: auto;
}

.giftBanner {
    width: 100%;
    max-width: 7.5rem;
    /* height: 1rem; */
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    min-height: 1rem !important;
}
.giftBanner img {
    display: block;
    width: 100%;
}
.giftBanner .gift_tleft {
    position: absolute;
    right: 2rem;
    top: 0.38rem;
    width: 1.5rem;
    color: #A84043;
    height: 0.5rem;
    font-size: 12px;
    border-radius: 0.4rem;
    background: #fff;
    text-align: center;
    line-height: 0.5rem;
    font-weight: 600;
}
.giftBanner .gift_tright {
    position: absolute;
    right: 0.25rem;
    top: 0.38rem;
    width: 1.5rem;
    color: #A84043;
    height: 0.5rem;
    font-size: 12px;
    border-radius: 0.4rem;
    background: #fff;
    text-align: center;
    line-height: 0.5rem;
    font-weight: 600;
}

.yd-slider-item img {
    min-height: 3.8rem;
}
</style>
<style>
.box .yd-slider {
    height: 3.8rem!important;
    background: #f5f5f5;
}

.box .yd-slider-item {
    background: #f5f5f5;
}

.box .yd-search-input:before,
.box .yd-search-input:after {
    border: 0;
}

.box .yd-search-input {
    padding: 3px 10px;
    border-radius: 20px;
    background-color: #fff!important;
}

.box .yd-search-input>.cancel-text {
    padding: 0;
}
</style>